<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.*" %>
<%@ page import="au.com.somethingwritten.model.*" %>
	<%
           if (request.getParameter("fromMasterPage") == null)
           {
                %>
                  <jsp:forward page="masterPage.jsp">
                    <jsp:param name="embeddedPageName" value 
                     ="paymentPage.jsp"/>
                     <jsp:param name="submitPageName" value 
                     ="paymentPage.jsp"/>
                  </jsp:forward>
                <%
           }
      %>
      <%
  			ShoppingCart cart = (ShoppingCart)session.getAttribute("cart");
			if(cart == null){
				cart = new ShoppingCart();
			}
		%>
		
		<!-- Import JQuery Library -->
		<script src="jslib/jquery.js" type="text/javascript"></script>
		
		
		<script type="text/javascript">
		//<![CDATA[
		function validate()
		{
			var firstErr = null;
			$(".err_msg").text("");
			var isValid = true;
			
			var pcode_regex = new RegExp("[0-9]{4}");
			var month_regex = new RegExp("[0-9]{2}");
			var year_regex = new RegExp("201[2-9]");
			var card_regex = new RegExp("([0-9]{4}[-]?){4}");
			var num_dash_only_regex = new RegExp("[^0-9-]");
			var cvv_regex = new RegExp("[0-9]{3}");
			
			//validate credit card number
			if($("#card_num").val() == "" || $("#card_num").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#card_num");
				}
				isValid = false;
				$("#card_num_err").text("Please provide a valid credit card number.");
			}else if(!card_regex.test($("#card_num").val())){
				if(firstErr == null){
					firstErr = $("#card_num");
				}
				isValid = false;
				$("#card_num_err").text("Please provide a valid credit card number.");
			}else if(num_dash_only_regex.test($("#card_num").val())){
				if(firstErr == null){
					firstErr = $("#card_num");
				}
				isValid = false;
				$("#card_num_err").text("Please provide a valid credit card number.");
			}else if($("#card_num").val().replace(/-/g,"").length > 16){
				if(firstErr == null){
					firstErr = $("#card_num");
				}
				isValid = false;
				$("#card_num_err").text("Please provide a valid credit card number.");
			}
			
			//validate card name
			if($("#card_name").val() == "" || $("#card_name").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#card_name");
				}
				isValid = false;
				$("#card_name_err").text("Please provide a valid card holder's name.");
			}
			
			//validate card exp date
			if($("#exp_month").val() == "" || $("#exp_month").val() == "undefined"){
				isValid = false;
				$("#card_date_err").text("Please provide a valid card expiration date.");
				if(firstErr == null){
					firstErr = $("#exp_month");
				}
			}else if($("#exp_year").val() == "" || $("#exp_year").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#exp_year");
				}
				isValid = false;
				$("#card_date_err").text("Please provide a valid card expiration date.");
			}else if(!month_regex.test($("#exp_month").val())){
				if(firstErr == null){
					firstErr = $("#exp_month");
				}
				isValid = false;
				$("#card_date_err").text("Please provide a valid card expiration date.");
			}else if(!year_regex.test($("#exp_year").val())){
				if(firstErr == null){
					firstErr = $("#exp_year");
				}
				isValid = false;
				$("#card_date_err").text("Please provide a valid card expiration date.");
			}else if(parseInt($("#exp_month").val()) < 0 || parseInt($("#exp_month").val()) > 12 ){
				if(firstErr == null){
					firstErr = $("#exp_month");
				}
				$("#card_date_err").text("Please provide a valid card expiration date.");
			}
			
			//validate cvv
			if($("#card_cvv").val() == "" || $("#card_cvv").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#card_cvv");
				}
				isValid = false;
				$("#card_cvv_err").text("Please provide a valid CVV.");
			}else if(!cvv_regex.test($("#card_cvv").val())){
				if(firstErr == null){
					firstErr = $("#card_cvv");
				}
				isValid = false;
				$("#card_cvv_err").text("Please provide a valid CVV.");
			}
			
			//validate shipping address
			if($("#ship_addr").val() == "" || $("#ship_addr").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#ship_addr");
				}
				isValid = false;
				$("#ship_addr_err").text("Please provide a shipping street address.");
			}
			//validate shipping city
			if($("#ship_city").val() == "" || $("#ship_city").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#ship_city");
				}
				isValid = false;
				$("#ship_city_err").text("Please provide a shipping city/town.");
			}
			//validate shipping postcode
			if($("#ship_postcode").val() == "" || $("#ship_postcode").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#ship_postcode");
				}
				isValid = false;
				$("#ship_postcode_err").text("Please provide a valid postcode.");
			}else if(!pcode_regex.test($("#ship_postcode").val())){
				if(firstErr == null){
					firstErr = $("#ship_postcode");
				}
				isValid = false;
				$("#ship_postcode_err").text("Please provide a valid postcode.");
			}
			
			//validate billing address
			if($("#bill_addr").val() == "" || $("#bill_addr").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#bill_addr");
				}
				isValid = false;
				$("#bill_addr_err").text("Please provide a billing street address.");
			}
			//validate billing city
			if($("#bill_city").val() == "" || $("#bill_city").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#bill_city");
				}
				isValid = false;
				$("#bill_city_err").text("Please provide a billing city/town.");
			}
			//validate billing postcode
			if($("#bill_postcode").val() == "" || $("#bill_postcode").val() == "undefined"){
				if(firstErr == null){
					firstErr = $("#bill_postcode");
				}
				isValid = false;
				$("#bill_postcode_err").text("Please provide a valid billing postcode.");
			}else if(!pcode_regex.test($("#bill_postcode").val())){
				if(firstErr == null){
					firstErr = $("#bill_postcode");
				}
				isValid = false;
				$("#bill_postcode_err").text("Please provide a valid postcode.");
			}
			
			if(firstErr != null){
				firstErr.focus();
			}
			
			return isValid;
		}
		
		
		$(document).ready(function(){
			
			$("#pay_button").attr("disabled", "disabled");
			
			var payForm = $("#pay_form");
			
			payForm.submit(function(e) {

                if(validate()) {
                	//it's valid
                }else{
                    e.preventDefault();	
                }
            });
			
			
		  $("#same_as_ship").click(function(){
			  $("#same_as_ship").focus();
			  if($("#same_as_ship").is(':checked')){
					$(".bill_val").attr("disabled", "disabled");
					$("#ship_addr").trigger('change');
					$("#ship_city").trigger('change');
					$("#ship_state").trigger('change');
					$("#ship_postcode").trigger('change');
			  }else{
				  $(".bill_val").removeAttr("disabled");
			  }
		  });
		  
		  $("#ship_addr").change(function(){
			  if($("#same_as_ship").is(':checked')){
					$("#bill_addr").attr("value", $("#ship_addr").val());
			  }
		  });
		  
		  $("#ship_city").change(function(){
			  if($("#same_as_ship").is(':checked')){
					$("#bill_city").attr("value", $("#ship_city").val());
			  }
		  });
		  
		  $("#ship_state").change(function(){
			  if($("#same_as_ship").is(':checked')){
					$("#bill_state").attr("value", $("#ship_state").val());
			  }
		  });
		  
		  $("#ship_postcode").change(function(){
			  if($("#same_as_ship").is(':checked')){
					$("#bill_postcode").attr("value", $("#ship_postcode").val());
			  }
		  });
		  
		  $("input[name='ship_method_id']").change(function(){
			  $("input[name='ship_method_id']:checked").focus();
			  var ship_method_id = $("input[name='ship_method_id']:checked").val();
			  if(ship_method_id != "undefined"){
			  	var dynamic_id = ("#ship_cost_" + ship_method_id);
			  	var ship_cost = $(dynamic_id).val();
			  	var totalCost = parseFloat($("#sub_total").val()) + parseFloat(ship_cost);
			  	$("#total").attr("value", totalCost.toFixed(2));
			  	$("#pay_button").removeAttr("disabled");
			  }else{
				  $("#total").attr("value", $("#sub_total").val());
				  $("#pay_button").attr("disabled", "disabled");
			  }
		
			
		  });
		});
		//]]>
		</script>
		
		<form id="pay_form" name="go_to_checkout" method="post" action="/SomethingWritten/pay">
	      	<h2>Credit Card Details</h2>
	      	<!-- card number input  -->
	      	<label class="payment_lbl" for="card_num">credit card number: </label>
    		<input title="credit card number" class="payment_input" maxlength="19" type="text" name="card_num" id="card_num"/>
    		<div id="card_num_err" class="err_msg"></div>
    		<br />
    		<!-- name input  -->
    		<label class="payment_lbl" for="card_name">card holder's name: </label>
    		<input title="credit card holders name" class="payment_input" type="text" name="card_name" id="card_name"/>
    		<div id="card_name_err" class="err_msg"></div>
    		<br />
    		<!-- expiry input  -->
    		<label class="payment_lbl" for="exp_month">expiry date: </label>
    		<input title="credit card expiry month" class="payment_input payment_2digit" maxlength="2" type="text" name="exp_month" id="exp_month"/>
    		/ 
    		<input title="credit card expiry year" class="payment_input payment_4digit" maxlength="4" type="text" name="exp_year" id="exp_year"/>
    		<!-- CVV input  -->
    		<label class="payment_lbl cvv_lbl" for="card_cvv">CVV: </label>
    		<input title="credit card cvv" class="payment_input payment_4digit" maxlength="4" type="text" name="card_cvv" id="card_cvv"/>
    		<div id="card_date_err" class="err_msg"></div>
    		<div id="card_cvv_err" class="err_msg"></div>
    		
	      	<div class="result_holder">
			</div>
			
			<h2>Shipping Address</h2>
			<!-- address input  -->
	      	<label class="payment_lbl" for="ship_addr">street address: </label>
    		<input title="shipping address" id="ship_addr" class="payment_input address_line" type="text" name="ship_addr"/>
    		<div id="ship_addr_err" class="err_msg"></div>
    		<br />
    		<label class="payment_lbl" for="ship_city">city/town: </label>
    		<input title="shipping city" id="ship_city" class="payment_input" type="text" name="ship_city"/>
    		
    		<label class="payment_lbl state_lbl" for="ship_state">state: </label>
    		<select title="shipping state" id="ship_state" name="ship_state">
				<option value="NSW">NSW</option>
				<option value="VIC">VIC</option>
				<option value="ACT">ACT</option>
				<option value="WA">WA</option>
				<option value="NT">NT</option>
				<option value="TAS">TAS</option>
			</select>
			<label class="payment_lbl pcode_lbl" for="ship_postcode">postcode: </label>
    		<input title="shipping postcode" id="ship_postcode" class="payment_input payment_4digit" maxlength="4" type="text" name="ship_postcode"/>
    		<div id="ship_city_err" class="err_msg"></div>
    		<div id="ship_postcode_err" class="err_msg"></div>
    		<br />
    		
			<h2>Billing Address</h2>
			<!-- set bill address same as shipping  -->
			<input title="billing address same as shipping" id="same_as_ship" type="checkbox" name="same_as_ship" value="same_as_ship"/>
			<label class="checkbox_lbl" for="same_as_ship">same as shipping address</label>
			<br />
			<br />
			<!-- address input  -->
	      	<label class="payment_lbl" for="bill_addr">street address: </label>
    		<input title="billing address" id="bill_addr" class="payment_input address_line bill_val" type="text" name="bill_addr"/>
    		<div id="bill_addr_err" class="err_msg"></div>
    		<br />
    		<label class="payment_lbl" for="bill_city">city/town: </label>
    		<input title="billing city" id="bill_city" class="payment_input bill_val" type="text" name="bill_city"/>
    		<label class="payment_lbl state_lbl" for="bill_state">state: </label>
    		<select title="billing state" id="bill_state" name="bill_state" class="bill_val">
				<option value="NSW" class="bill_val">NSW</option>
				<option value="VIC">VIC</option>
				<option value="ACT">ACT</option>
				<option value="WA">WA</option>
				<option value="NT">NT</option>
				<option value="TAS">TAS</option>
			</select>
			<label class="payment_lbl pcode_lbl" for="bill_postcode">postcode: </label>
    		<input title="billing postcode" id="bill_postcode" class="payment_input payment_4digit bill_val" maxlength="4" type="text" name="bill_postcode"/>
    		<div id="bill_city_err" class="err_msg"></div>
    		<div id="bill_postcode_err" class="err_msg"></div>
    		<br />
    		<fieldset>
			<legend><strong class="legend_heading">Shipping Method</strong></legend>
			<%
			ArrayList<ShippingMethod> shipping = (ArrayList<ShippingMethod>)request.getAttribute("shipping");
			
			
  			for(int i = 0; i < shipping.size(); i++){
    			out.print("<input title=\"shipping method option\"  type=\"radio\" name=\"ship_method_id\" value=\"" + shipping.get(i).getId() + "\"/>\n");
    			out.print("<input  type=\"hidden\" id=\"ship_cost_" + shipping.get(i).getId().toString() + "\" value=\"" + shipping.get(i).getCost().toString() + "\"/>\n");
    			out.print("<label class=\"radio_lbl\" for=\"ship_method_id\">" + shipping.get(i).getType() + 
    					" - $" + String.format("%1$,.2f", shipping.get(i).getCost()) + 
    					"</label><br />\n");
  			}
			%>
			<div id="shipping_err" class="err_msg"></div>
			</fieldset>
			
			
			
			
			<div class="cart_header_footer">
				<button id="pay_button" class="checkout_btn button" type="submit" name="pay_button">confirm and pay</button>
				<input type="hidden" id="sub_total" name="sub_total" value="<% out.print(String.format("%1$,.2f", cart.getCost())); %>" />
	      		<strong>Total:</strong> $<input title="total price" id="total" type="text" name="total" readonly="readonly" value="<% out.print(String.format("%1$,.2f", cart.getCost())); %>" />
	      	</div>
		</form>